@import "variable";
@function j($px) {
  @return $px /200 + rem;
}
//尺寸
@mixin size($width,$height:$width) {
  width: j($width);
  height: j($height);

}

@mixin iphonex() {
  //iphoneX 适配
  @media only screen and (device-width: 375px) and (device-height: 812px)  and (-webkit-device-pixel-ratio: 3) {
    @content;
  }

  @media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio:3) {
    @content;

  }
  @media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio:2) {
    @content;
  }
}
/*针对 NIO APP 里访问的场景*/
@mixin nio-app(){
  #app.nio-app{
    @content;
  }
}

/*针对iphoneX 全面屏的访问场景*/
@mixin nio-app-iphoneX() {
  //iphoneX 适配
  @media only screen and (device-width: 375px) and (device-height: 812px)  and (-webkit-device-pixel-ratio: 3) {
    #app.nio-app{
      @content;
    }
  }

  @media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio:3) {
    #app.nio-app{
      @content;

    }

  }
  @media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio:2) {
    #app.nio-app{
      @content;

    }
  }
}


//动画
@mixin make-motion($animationName,$duration:$animation-time) {

  .#{$animationName}-enter-active, .#{$animationName}-leave-active {
    transition: all $duration;
  }

  .#{$animationName}-enter, .#{$animationName}-leave-to {
    @extend .#{$animationName};
  }

}

//1px border

//@mixin hairline-bottom($border-color: #eeep,$left: 0) {
//  content: ' ';
//  position: absolute;
//  pointer-events: none;
//  box-sizing: border-box;
//  left: $left;
//  right: 0;
//  bottom: 0;
//  transform: scaleY(0.5);
//  border-bottom: 1px solid $border-color;
//}

@mixin hairLine() {
  position: relative;
  &:after {
    position: absolute;
    box-sizing: border-box;
    content: ' ';
    pointer-events: none;
    top: -50%;
    right: -50%;
    bottom: -50%;
    left: -50%;
    border: 0 solid $borderColor;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }
}

@mixin hairLine-top($borderColor:$borderColor) {
  @include hairLine;
  &:after {
    border-top-width: 1px;
    border-color: $borderColor;
  }
}


@mixin hairLine-right($borderColor:$borderColor) {
  @include hairLine;
  &:after {
    border-right-width: 1px ;
    border-color: $borderColor;
  }
}
@mixin hairLine-bottom($borderColor:$borderColor) {
  @include hairLine;
  &:after {
    border-bottom-width: 1px;
    border-color: $borderColor;
  }
}

@mixin hairLine-left($borderColor:$borderColor) {
  @include hairLine;
  &:after {
    border-left-width: 1px;
    border-color: $borderColor;
  }
}

@mixin hairLine-top-bottom($borderColor:$borderColor) {
  @include hairLine;
  &:after {
    border-width: 1px 0;
    border-color: $borderColor;
  }
}

@mixin hairLine-left-right($borderColor:$borderColor) {
  @include hairLine;
  &:after {
    border-width: 0 1px;
    border-color: $borderColor;
  }
}

@mixin hairLine-all($borderColor:$borderColor) {
  @include hairLine;
  &:after {
    border-width: 1px;
    border-color: $borderColor;
  }
}




@mixin multi-ellipsis($lines) {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: $lines;
  /* autoprefixer: ignore next */
  -webkit-box-orient: vertical;
}


@mixin ellipsis() {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}


@mixin triangle($width, $height, $color, $direction) {
  $width: $width/2;
  $color-border-style: $height solid $color;
  $transparent-border-style: $width solid transparent;
  height: 0;
  width: 0;
  @if $direction==up {
    border-bottom: $color-border-style;
    border-left: $transparent-border-style;
    border-right: $transparent-border-style;
  } @else if $direction==right {
    border-left: $color-border-style;
    border-top: $transparent-border-style;
    border-bottom: $transparent-border-style;
  } @else if $direction==down {
    border-top: $color-border-style;
    border-left: $transparent-border-style;
    border-right: $transparent-border-style;
  } @else if $direction==left {
    border-right: $color-border-style;
    border-top: $transparent-border-style;
    border-bottom: $transparent-border-style;
  }
}









